<template>
    <!-- 顶部标题栏 -->
    <div class="top-header">
      <div class="left-section">      
        <div class="page-title">智医云联公共服务系统</div>
      </div>
      <div class="header-actions">
        <div class="current-time">{{ currentTime }}</div>
        <div class="action-item">
          <el-icon><Headset /></el-icon>
          <div class="action-text">服务热线: 400-0000-000</div>
        </div>
      </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { ElMessage } from 'element-plus'

// 当前时间显示
const currentTime = ref('')
let timeInterval = null

onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timeInterval) clearInterval(timeInterval)
})

const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    weekday: 'short'
  })
}
</script>
<style lang="scss" scoped>
// 顶部标题栏样式 - 与TopHeader.vue保持一致
.top-header {
  background: white;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  
  .current-time {
    font-size: 14px;
    color: #606266;
    margin-right: 20px;
  }
}

.left-section {
  display: flex;
  align-items: center;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.action-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  
  .action-text {
    margin-left: 5px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .device-options {
    grid-template-columns: 1fr;
  }
  
  .department-selector {
    :deep(.el-radio-group) {
      flex-direction: column;
    }
  }
  
  .top-header {
    padding: 0 15px;
    
    .page-title {
      font-size: 18px;
    }
  }
}
</style>